<template>
  <view class="Bplate" :style="`width:${width}rpx`">
    <!-- <view class="Bplate_title"> {{ title }}</view> -->
    <view class="Bplate_head">
      <view class="Bplate_list" v-for="(item, indexs) in List" :key="indexs">
        <view class="Bplate_list_left">
          {{ item.key }}
        </view>
        <view class="Bplate_list_right">
          <view :style="`color:${color}`">
            {{ item.value }}
            <text v-if="item.is_copy" class="heis" @click.stop="copy_(item.value)"> 复制</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
// import props from "./props";
/**
  @param{
    width 组件宽带
    keyName  //  [{key:'字段名称',value:'字段的内容字段',is_copy:true  }] ps:  /key 左边的名字  value 内容的字段 is_copy 字段是否显示复制小图标
  } 
  
 */
import uniCopy from "@/components/xb-copy/uni-copy.js";
import { ToStringTime } from "@/utils";
import { ref, nextTick, toRefs, watch } from "vue";
export interface Props {
  width?: number | string,
  keyName?: any,
  keyValue?: any,
  color?: string
}
const props = withDefaults(defineProps<Props>(), {
  width: 690,
  keyName: [
    {
      key: '订单编号',
      value: 'order_no',
    },
    {
      key: '创建时间',
      value: 'add_time',
    },
    {
      key: '付款时间',
      value: 'money_time',
      is_copy: true
    },
  ],
  keyValue: {
    order_no: '111111',
    add_time: '2023-08-16 14:08:21',
    money_time: '2023-08-16 14:08:21'
  },
  color: '#919191'
})
const copy_img = ref<string>('')
const List = ref<any>([])
const { keyValue, keyName } = toRefs(props)
watch(keyValue, (Node) => {
  let arr = [];
  for (let i in Node) {
    keyName.value.forEach((items, indexs) => {
      if (i === items.value) {
        arr.push({
          key: items.key,
          value: Node[i] || "-",
          is_copy: items.is_copy || false,
        });
      }
    });
  }
  nextTick(() => {
    arr.forEach((items, indexs) => {
      let list_ = items.key.split("支付");
      if (list_.length > 1) {
        if (list_.includes("时间")) {
          items.value = ToStringTime(items.value, 2);
        } else if (list_.includes("金钱")) {
          items.value = `￥${items.value}`;
        } else if (list_.includes("金额")) {
          items.value = `￥${items.value}`;
        }
      }
    });
    List.value = arr;
  });
}, { deep: true, immediate: true })
function copy_(Node) {
  uniCopy({
    content: Node,
    success: (res) => {
      uni.showToast({
        title: "复制成功",
        icon: "none",
      });
    },
    error: (e) => {
      uni.showToast({
        title: e,
        icon: "none",
        duration: 3000,
      });
    },
  });
}
/*
@param{
  组件使用
  参数如下
   title //标题
   width  //组件宽度 单位px
   keyName  //  [{key:'字段名称',value:'字段的内容字段',is_copy:true  }] ps:  /key 左边的名字  value 内容的字段 is_copy 字段是否显示复制小图标
   [
        {
          key: '商家',
          value: 'supplier_name',
        },
        {
          key: '姓名',
          value: 'tourist_name',
        },
        {
          key: '订单编号',
          value: 'order_no',
          is_copy: true
        },
      ]
  keyValue  //type Object   这里的值的只要有上面的value值就会自动匹配查找
   // obj = {
    //   tourist_name: '爸爸',
    //   supplier_name: '全球e旅游',
    //   order_no: "PS20220802115522387b3d",
    //   add_time: 1662451066,
    //   area_type: 1,
    //   count_down: 1662452866,
    //   cs_telephone: "020-88811475",
    //   deduct: "",
    //   gift_data: [],
    //   gift_type: null,
    //   id: 8156,
    //   invoice_id: "",
    //   invoice_status: 1,
    //   invoice_status_key: 0,
    //   invoice_status_name: "待开票",
    //   is_affirm: 0,
    //   is_agent: 0,
    //   is_completion: 0,
    //   is_gift: 0,
    //   is_offer_invoice: 0,
    //   is_receive: 0,
    //   is_use: 0,
    //   mall_product_grounding: 1,
    //   mall_product_id: 259,
    //   multi_shop: null,
    //   order_mall_refund: null,
    //   order_mall_travel_info: [],
    // },
}
**/
// export default {
//   mixins: [props],
//   watch: {
//     keyValue: {
//       immediate: true,
//       deep: true,
//       handler(Node) {
//         let t = this;
//         let opt = t.keyName;
//         let arr = [];
//         for (let i in Node) {
//           opt.forEach((items, indexs) => {
//             if (i === items.value) {
//               arr.push({
//                 key: items.key,
//                 value: Node[i] || "-",
//                 is_copy: items.is_copy || false,
//               });
//             }
//           });
//         }
//         t.$nextTick(() => {
//           arr.forEach((items, indexs) => {
//             let list_ = items.key.split("支付");
//             if (list_.length > 1) {
//               if (list_.includes("时间")) {
//                 items.value = ToStringTime(items.value, 2);
//               } else if (list_.includes("金钱")) {
//                 items.value = `￥${items.value}`;
//               } else if (list_.includes("金额")) {
//                 items.value = `￥${items.value}`;
//               }
//             }
//           });
//           t.List = arr;
//         });
//       },
//     },
//   },
//   data() {
//     return {
//       List: [],
//       copy_img: '',
//     };
//   },
//   methods: {
//     copy_(Node) {
//       console.log(Node, "node");
//       uniCopy({
//         content: Node,
//         success: (res) => {
//           uni.showToast({
//             title: "复制成功",
//             icon: "none",
//           });
//         },
//         error: (e) => {
//           uni.showToast({
//             title: e,
//             icon: "none",
//             duration: 3000,
//           });
//         },
//       });
//     },
//   },
// };
</script>
<style lang="scss" scoped>
@import "./plate.scss";
</style>
